<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="search-bar">
                <view class="search-input">
                    <uni-icon type="search" size="24" color="#999"></uni-icon>
                    <text class="search-placeholder">搜索商品</text>
                </view>
                <view class="scan-icon">
                    <uni-icon type="scan" size="28" color="#333"></uni-icon>
                </view>
            </view>
        </view>

        <!-- 内容区域 -->
        <scroll-view class="content" scroll-y>
            <!-- 轮播图 -->
            <view class="banner">
                <swiper autoplay indicator-dots circular>
                    <swiper-item v-for="(item, index) in banners" :key="index">
                        <image :src="item.image" mode="aspectFill" class="banner-img"></image>
                    </swiper-item>
                </swiper>
            </view>

            <!-- 分类导航 -->
            <view class="category-nav">
                <view v-for="(category, index) in categories" :key="index" class="category-item" @click="goCategory(category.id)">
                    <view class="category-icon">
                        <image :src="category.icon" mode="aspectFill"></image>
                    </view>
                    <text class="category-name">{{ category.name }}</text>
                </view>
            </view>

            <!-- 今日推荐 -->
            <view class="recommendation">
                <view class="section-title">
                    <text class="title-text">今日推荐</text>
                    <view class="more-link" @click="goMore('recommend')">
                        <text>查看更多</text>
                        <uni-icon type="right" size="16" color="#999"></uni-icon>
                    </view>
                </view>
                <view class="product-list">
                    <view v-for="(product, index) in recommendProducts" :key="index" class="product-item" @click="goProductDetail(product.id)">
                        <view class="product-image">
                            <image :src="product.image" mode="aspectFill"></image>
                        </view>
                        <text class="product-title">{{ product.title }}</text>
                        <text class="product-price">¥{{ product.price }}</text>
                        <view class="add-cart" @click.stop="addToCart(product)">
                            <uni-icon type="shopping-cart" size="24" color="#fff"></uni-icon>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 限时特惠 -->
            <view class="flash-sale">
                <view class="section-title">
                    <text class="title-text">限时特惠</text>
                    <view class="countdown">
                        <text class="countdown-text">距结束</text>
                        <view class="countdown-item">{{ hours }}</view>
                        <text class="countdown-separator">:</text>
                        <view class="countdown-item">{{ minutes }}</view>
                        <text class="countdown-separator">:</text>
                        <view class="countdown-item">{{ seconds }}</view>
                    </view>
                </view>
                <scroll-view class="flash-sale-scroll" scroll-x>
                    <view v-for="(product, index) in flashSaleProducts" :key="index" class="flash-sale-item" @click="goProductDetail(product.id)">
                        <view class="product-image">
                            <image :src="product.image" mode="aspectFill"></image>
                        </view>
                        <text class="flash-price">¥{{ product.price }}</text>
                        <text class="original-price">¥{{ product.originalPrice }}</text>
                    </view>
                </scroll-view>
            </view>

            <!-- 新品上市 -->
            <view class="new-arrivals">
                <view class="section-title">
                    <text class="title-text">新品上市</text>
                </view>
                <view class="new-products-grid">
                    <view v-for="(product, index) in newProducts" :key="index" class="new-product-item" @click="goProductDetail(product.id)">
                        <view class="product-image">
                            <image :src="product.image" mode="aspectFill"></image>
                        </view>
                        <text class="product-title">{{ product.title }}</text>
                        <text class="product-price">¥{{ product.price }}</text>
                    </view>
                </view>
            </view>

            <!-- 特色专题 -->
            <view class="special-topics">
                <view class="section-title">
                    <text class="title-text">特色专题</text>
                </view>
                <view class="topics-grid">
                    <view v-for="(topic, index) in topics" :key="index" class="topic-item" @click="goTopicDetail(topic.id)">
                        <image :src="topic.image" mode="aspectFill"></image>
                        <text class="topic-title">{{ topic.title }}</text>
                    </view>
                </view>
            </view>

            <!-- 底部信息 -->
            // <view class="footer">
            //     <text class="footer-text">© 2024 NPGD-View 商城</text>
            // </view>
        </scroll-view>

        <!-- 底部导航栏 -->
        <view class="tabbar">
            <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: activeTab === index}" @click="tabbarChange(index)">
                <uni-icon :type="tab.icon" size="28" :color="activeTab === index ? '#007aff' : '#999'"></uni-icon>
                <text class="tab-text" :style="{color: activeTab === index ? '#007aff' : '#999'}">{{ tab.name }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { onLoad, onShow } from '@dcloudio/uni-app';
    import { ref, reactive, inject, computed, onUnmounted } from 'vue';
    
    const router = inject('$router');
    const toast = inject('$toast');
    const storage = inject('$storage');
    const api = inject('$api');

    // 轮播图数据 - 使用本地图片
    const banners = ref([
        { id: 1, image: '@/static/banner.png', link: '/pages/demo/demo' },
        { id: 2, image: '@/static/logo.png', link: '/pages/demo/demo' },
        { id: 3, image: '@/static/image/icon_clear.png', link: '/pages/demo/demo' }
    ]);

    // 分类导航数据 - 使用本地图标
    const categories = ref([
        { id: 1, name: '手机数码', icon: '@/static/image/icon_clear.png' },
        { id: 2, name: '家居生活', icon: '@/static/image/icon_clear.png' },
        { id: 3, name: '美妆护肤', icon: '@/static/image/icon_clear.png' },
        { id: 4, name: '服饰鞋包', icon: '@/static/image/icon_clear.png' },
        { id: 5, name: '食品生鲜', icon: '@/static/image/icon_clear.png' },
        { id: 6, name: '母婴玩具', icon: '@/static/image/icon_clear.png' },
        { id: 7, name: '运动户外', icon: '@/static/image/icon_clear.png' },
        { id: 8, name: '更多分类', icon: '@/static/image/icon_clear.png' }
    ]);

    // 推荐商品数据 - 使用本地图片
    const recommendProducts = ref([
        { id: 1, title: '智能手表 多功能运动监测防水', price: 299.00, image: '@/static/banner.png' },
        { id: 2, title: '无线蓝牙耳机 高音质长续航', price: 199.00, image: '@/static/logo.png' },
        { id: 3, title: '智能手环 心率监测计步器', price: 99.00, image: '@/static/image/icon_clear.png' },
        { id: 4, title: '移动电源 10000mAh大容量', price: 89.00, image: '@/static/banner.png' }
    ]);

    // 限时特惠数据 - 使用本地图片
    const flashSaleProducts = ref([
        { id: 5, title: '便携式榨汁机 迷你果汁机', price: 79.00, originalPrice: 129.00, image: '@/static/logo.png' },
        { id: 6, title: '电动牙刷 声波震动充电式', price: 129.00, originalPrice: 199.00, image: '@/static/banner.png' },
        { id: 7, title: '保温杯 304不锈钢大容量', price: 59.00, originalPrice: 99.00, image: '@/static/image/icon_clear.png' },
        { id: 8, title: '蓝牙音箱 便携防水低音炮', price: 159.00, originalPrice: 259.00, image: '@/static/logo.png' }
    ]);

    // 新品上市数据 - 使用本地图片
    const newProducts = ref([
        { id: 9, title: '智能台灯 护眼无频闪可调光', price: 129.00, image: '@/static/banner.png' },
        { id: 10, title: '空气净化器 除甲醛除异味', price: 499.00, image: '@/static/logo.png' },
        { id: 11, title: '小型加湿器 静音大容量', price: 69.00, image: '@/static/image/icon_clear.png' },
        { id: 12, title: '智能门锁 指纹密码电子锁', price: 899.00, image: '@/static/banner.png' }
    ]);

    // 特色专题数据 - 使用本地图片
    const topics = ref([
        { id: 1, title: '春季新品上市', image: '@/static/banner.png' },
        { id: 2, title: '家居生活专场', image: '@/static/logo.png' }
    ]);

    // 底部导航数据
    const tabs = ref([
        { name: '首页', icon: 'home' },
        { name: '选品', icon: 'apps' },
        { name: '订单', icon: 'list' },
        { name: '我的', icon: 'user' }
    ]);

    // 当前选中的标签
    const activeTab = ref(0);

    // 倒计时相关
    const hours = ref('00');
    const minutes = ref('59');
    const seconds = ref('59');
    let countdownInterval = null;

    // 分类导航点击
    const goCategory = (id) => {
        toast.showToast(`进入分类: ${id}`);
    };

    // 查看更多
    const goMore = (type) => {
        toast.showToast(`查看更多${type}`);
    };

    // 商品详情
    const goProductDetail = (id) => {
        toast.showToast(`查看商品详情: ${id}`);
    };

    // 添加购物车
    const addToCart = (product) => {
        toast.showToast('已加入购物车');
    };

    // 专题详情
    const goTopicDetail = (id) => {
        toast.showToast(`查看专题: ${id}`);
    };

    // 底部导航切换
    const tabbarChange = (index) => {
        activeTab.value = index;
        
        // 这里可以根据实际页面路径进行跳转
        switch(index) {
            case 0: // 首页
                break;
            case 1: // 选品
                toast.showToast('选品页面');
                break;
            case 2: // 订单
                toast.showToast('订单页面');
                break;
            case 3: // 我的
                toast.showToast('我的页面');
                break;
        }
    };

    // 更新倒计时
    const updateCountdown = () => {
        let s = parseInt(seconds.value);
        let m = parseInt(minutes.value);
        let h = parseInt(hours.value);
        
        s--;
        if (s < 0) {
            s = 59;
            m--;
            if (m < 0) {
                m = 59;
                h--;
                if (h < 0) {
                    h = 0;
                    m = 0;
                    s = 0;
                }
            }
        }
        
        hours.value = h < 10 ? '0' + h : h.toString();
        minutes.value = m < 10 ? '0' + m : m.toString();
        seconds.value = s < 10 ? '0' + s : s.toString();
    };

    onLoad(() => {
        console.log('商城首页加载');
    });
    
    onShow(() => {
        // 启动倒计时
        countdownInterval = setInterval(updateCountdown, 1000);
    });
    
    onUnmounted(() => {
        // 清除定时器
        if (countdownInterval) {
            clearInterval(countdownInterval);
        }
    });
</script>

<style lang="less" scoped>
    .container {
        height: 100vh;
        background: #f5f5f5;
        display: flex;
        flex-direction: column;
    }

    /* 顶部搜索栏 */
    .header {
        background: #fff;
        padding: 0 24rpx;
        height: 96rpx;
        display: flex;
        align-items: center;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        z-index: 10;
    }
    
    .search-bar {
        flex: 1;
        display: flex;
        align-items: center;
    }
    
    .search-input {
        flex: 1;
        height: 64rpx;
        background: #f2f2f2;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        padding: 0 24rpx;
    }
    
    .search-placeholder {
        font-size: 28rpx;
        color: #999;
        margin-left: 12rpx;
    }
    
    .scan-icon {
        margin-left: 24rpx;
    }

    /* 内容区域 */
    .content {
        flex: 1;
        overflow: hidden;
        padding-bottom: 100rpx;
    }

    /* 轮播图 */
    .banner {
        width: 100%;
        height: 300rpx;
        background: #fff;
        margin-bottom: 16rpx;
    }
    
    .banner-img {
        width: 100%;
        height: 100%;
    }

    /* 分类导航 */
    .category-nav {
        display: flex;
        flex-wrap: wrap;
        padding: 24rpx 0;
        background: #fff;
        margin-bottom: 16rpx;
    }
    
    .category-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 16rpx;
    }
    
    .category-icon {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        background: #f8f8f8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;
    }
    
    .category-icon image {
        width: 60rpx;
        height: 60rpx;
    }
    
    .category-name {
        font-size: 24rpx;
        color: #333;
    }

    /* 通用标题样式 */
    .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx;
        background: #fff;
    }
    
    .title-text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }
    
    .more-link {
        display: flex;
        align-items: center;
    }
    
    .more-link text {
        font-size: 24rpx;
        color: #999;
    }

    /* 推荐商品 */
    .recommendation {
        margin-bottom: 16rpx;
    }
    
    .product-list {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        padding: 0 16rpx 16rpx;
    }
    
    .product-item {
        width: 42%;
        padding: 16rpx;
        position: relative;
    }
    
    .product-image {
        width: 100%;
        height: 300rpx;
        background: #f8f8f8;
        border-radius: 12rpx;
        overflow: hidden;
        margin-bottom: 12rpx;
    }
    
    .product-image image {
        width: 100%;
        height: 100%;
    }
    
    .product-title {
        font-size: 28rpx;
        color: #333;
        line-height: 40rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 8rpx;
    }
    
    .product-price {
        font-size: 32rpx;
        color: #e64340;
        font-weight: bold;
    }
    
    .add-cart {
        position: absolute;
        bottom: 32rpx;
        right: 32rpx;
        width: 64rpx;
        height: 64rpx;
        background: #007aff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 限时特惠 */
    .flash-sale {
        margin-bottom: 16rpx;
    }
    
    .countdown {
        display: flex;
        align-items: center;
    }
    
    .countdown-text {
        font-size: 24rpx;
        color: #999;
        margin-right: 12rpx;
    }
    
    .countdown-item {
        width: 40rpx;
        height: 40rpx;
        background: #333;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8rpx;
    }
    
    .countdown-separator {
        font-size: 24rpx;
        color: #333;
        margin: 0 8rpx;
    }
    
    .flash-sale-scroll {
        display: flex;
        padding: 0 24rpx 16rpx;
        background: #fff;
    }
    
    .flash-sale-item {
        width: 200rpx;
        margin-right: 24rpx;
        flex-shrink: 0;
    }
    
    .flash-price {
        font-size: 32rpx;
        color: #e64340;
        font-weight: bold;
        margin-right: 8rpx;
    }
    
    .original-price {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
    }

    /* 新品上市 */
    .new-arrivals {
        margin-bottom: 16rpx;
    }
    
    .new-products-grid {
        display: flex;
        flex-wrap: wrap;
        background: #fff;
        padding: 0 16rpx 16rpx;
    }
    
    .new-product-item {
        width: 42%;
        padding: 16rpx;
    }

    /* 特色专题 */
    .special-topics {
        margin-bottom: 16rpx;
    }
    
    .topics-grid {
        display: flex;
        background: #fff;
        padding: 0 24rpx 24rpx;
    }
    
    .topic-item {
        flex: 1;
        position: relative;
        margin: 0 12rpx;
    }
    
    .topic-item image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
    }
    
    .topic-title {
        position: absolute;
        bottom: 24rpx;
        left: 24rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    }

    /* 底部信息 */
    .footer {
        padding: 24rpx 0;
        text-align: center;
        border-top: 1rpx solid #eee;
        background: #fff;
    }
    
    .footer-text {
        font-size: 24rpx;
        color: #999;
    }

    /* 底部导航栏 */
    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
    
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 12rpx 0;
    }
    
    .tab-text {
        font-size: 24rpx;
        margin-top: 8rpx;
    }
</style>